<template>
    <!-- 用印审批 -->
    <div class="seal">
        <div style="height:2px;background-color: #F5F6F7;"></div>
        <div class="headTabs padding15All ffffff">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="我收到的" name="first">
                    <TabsMain type="first" @Listsearch="Listsearch"/>
                </el-tab-pane>
                <el-tab-pane label="待我审批" name="second">
                    <TabsMain type="second" @Listsearch="Listsearch"/>
                </el-tab-pane>
                <el-tab-pane label="我发起的" name="third">
                    <TabsMain type="third" @Listsearch="Listsearch"/>
                </el-tab-pane>
                <el-tab-pane label="我已审批" name="fourth">
                    <TabsMain type="fourth" @Listsearch="Listsearch"/>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div style="height:15px;background-color: #F5F6F7;"></div>
        <div class="contentTable ffffff ">
            <div class="padding15All tableMain">
                <el-table
                    ref="multipleTable"
                    :data="list"
                    tooltip-effect="dark"
                    style="width: 100%;height:100%;"
                    @selection-change="handleSelectionChange"
                    :empty-text='emtypetxt'>
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        fixed
                        prop="contractName"
                        label="合同名称"
                        width="250">
                    </el-table-column>
                    <el-table-column
                        prop="promoterName"
                        label="发起人"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        label="状态"
                        width="100">
                        <template slot-scope="scope">
                            <p v-if="scope.row.sealAuditState==0" class="">审批中</p>
                            <p v-if="scope.row.sealAuditState==1" class="">审批通过</p>
                            <p v-if="scope.row.sealAuditState==2" class="">审批驳回</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="initiateTime"
                        label="审批发起时间"
                        width="180">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="e"
                        label="合同发起端"
                        width="150">
                    </el-table-column> -->
                    <!-- <el-table-column
                        prop="f"
                        label="来源"
                        width="100">
                    </el-table-column> -->
                    <el-table-column
                        prop="approvalTime"
                        label="最新处理时间"
                        width="180">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="h"
                        label="审批类型"
                        width="100">
                    </el-table-column> -->
                    <el-table-column
                        prop="auditNum"
                        label="审批编号"
                        width="195">
                    </el-table-column>
                    <el-table-column
                        prop="promoterEnterprise"
                        label="发起方"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="sealName"
                        label="印章名称"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        label="参与人"
                        width="150">
                        <template slot-scope="scope">
                            <p class="" v-for="item in scope.row.participantsList" :key="item.userId">{{ item.enterpriseName}}({{ item.userName }}) </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="320">
                         <template slot-scope="scope">
                            <el-popover
                                placement="bottom"
                                v-if="activeName=='second'"
                                width="200"
                                trigger="hover">
                                <div class="padding15All">
                                    <p><i class="el-icon-warning" style="color:#faad14;"></i> 确定通过审核吗？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button type="primary" size="mini" @click="suresubmit(scope.row,1)">确定</el-button>
                                    </div>
                                </div>
                                <el-button slot="reference" type="text" size="small">同意</el-button>
                            </el-popover>
                            <el-popover
                                placement="bottom"
                                v-if="activeName=='second'"
                                width="200"
                                trigger="hover">
                                <div class="padding15All">
                                    <p><i class="el-icon-warning" style="color:#faad14;"></i> 确定驳回审核吗？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button type="primary" size="mini" @click="suresubmit(scope.row, 2)">确定</el-button>
                                    </div>
                                </div>
                                <el-button slot="reference" type="text" size="small">驳回</el-button>
                            </el-popover>
                            <!-- <el-button type="text" size="small" @click="dialogFormVisible = true">查看审批流程</el-button> -->
                            <el-button @click="handleEdit(scope.row)" type="text" size="small">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flexleft padding15" style="justify-content: flex-end;">
                 <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="params.pageNo"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="params.pageSize"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="查看审批流程" :visible.sync="dialogFormVisible" width="560px">
            <div class="flow">
                <div class="flexleft">
                    <img src="https://asset.tsign.cn/apps/saas-microfe/seal-manage-front/prod/1.7.2/img/yxz_new.914df624.png" alt="">
                </div>
                <div style="height: 300px;">
                    <el-steps direction="vertical" :active="1">
                        <el-step title="发起人" description="这是一段很长很长很长的描述性文字">
                            <div class="flexright">
                                <p>2023-05-11 14:59</p>
                            </div>
                        </el-step>
                        <el-step title="审批人"></el-step>
                        <el-step title="结束"></el-step>
                    </el-steps>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TabsMain from '../components/TabsMain.vue'
import { enterpriseAuditSeal } from '@/api/seal'
import { useSealJurisdictionAudit } from '@/api/work'
import Cookies from 'js-cookie'//获取cookies的信息
export default {
	name:'Seal',
	components:{
		TabsMain,
	},
    data() {
      return {
        activeName: 'first',
        dialogFormVisible:false,

        // 相对方企业请求参数
        params: {
            approvalEndTime: "",// 审批结束时间
            approvalStartTime: "",// 审批开始时间
            auditNum: "",// 审批编号
            auditStatus: "",// 审批状态
            contractName: "",// 合同名称
            enterpriseId: "",//企业id
            id: "",//记录id
            initiateEndTime: "",// 审批发起结束时间
            initiateStartTime: "",// 审批发起开始时间
            promoterEnterprise: "",// 发起方
            promoterName: "",// 参与人
            signContractId: "",// 合同id
            suditSealType: "",// 审批类型 0我收到的 1待我审批 2待审批 3我已审批
            userId: Cookies.get('admin_id'),//用户id//获取cookies中用户id的信息
            pageNo: 1,
            pageSize: 10,
        },
        list:[],
        total:0,
        emtypetxt: '',
        tableData: [
            {
                a:'合同14234122',
                b:'哈哈哈',
                c:'审批通过',
                d:'2000-11-11 11:11',
                e:'哈哈哈哈哈哈哈哈',
                f:'SAAS',
                g:'用印审批',
                h:'aaa，哈哈哈',
                i:' ASFA314412341234',
                j:'阿斯顿发空间阿斯顿发卡记录',
                k:'哈哈哈',
                l:'哈哈哈',
            }
        ],
      };
    },
    mounted() {
        let query=this.$route.query
        if(JSON.stringify(query) !== "{}"){
            if(query.suditSealType==1){
                this.activeName='second'
                this.getSuditSealType1()
            }else if(query.suditSealType==2){
                this.activeName='third'
                this.getSuditSealType2()
            }
        }else{
            this.getSuditSealType0()
        }
    },
    methods: {
        // 驳回同意
        suresubmit(row,status){
            useSealJurisdictionAudit({
                recordId:row.recordId,
                status,
                userId: Cookies.get('admin_id'),
            }).then(res=>{
                if(res.code==200){
                    this.$message.success(res.message)
                this.getSuditSealType1()

                }
            })
        },
        handleEdit(row) {
            console.log(row, "合同信息");
            this.$router.push({ path: "/SignDocument", query: { id: row.contractId } })
        },
        // 查询
        Listsearch(e){
            this.params.contractName = e.contractName;//合同名称
            this.params.auditNum = e.auditNum;// 审批编号
            this.params.initiateEndTime = e.initiateEndTime;// 审批发起结束时间
            this.params.initiateStartTime = e.initiateStartTime;// 审批发起开始时间
            this.params.approvalStartTime = e.approvalStartTime;//审批开始时间
            this.params.approvalEndTime = e.approvalEndTime;// 审批结束时间
            this.params.participantsName = e.participantsName;//参与人
            this.params.promoterEnterprise = e.promoterEnterprise;//发起方
            // this.params.promoterName = e.promoterName;//发起人
            if(this.activeName=='first'){
                this.params.auditStatus = e.auditStatus;// 审批状态0审批中1审批通过2审批驳回
                this.params.promoterName = e.promoterName;//发起人
                this.getSuditSealType0()
            }else if(this.activeName=='second'){
                this.params.promoterName = e.promoterName;//发起人
                this.getSuditSealType1()
            }else if(this.activeName=='third'){
                this.params.auditStatus = e.auditStatus;// 审批状态0审批中1审批通过2审批驳回
                this.getSuditSealType2()
            }else if(this.activeName=='fourth'){
                this.params.promoterName = e.promoterName;//发起人
                this.getSuditSealType3()
            }
        },
        getList() {
            this.emtypetxt = '加载中...';
            enterpriseAuditSeal(this.params).then(res => {
                this.list = res.result.records
                this.total = res.result.total
                if (this.list.length == 0) {
                    this.emtypetxt = '暂无数据'
                }
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        // 审批类型 0我收到的 1待我审批 2待审批 3我已审批
        //我收到的
        getSuditSealType0(){
            this.params.suditSealType=0
            this.getList()
        },
        //待我审批
        getSuditSealType1(){
            this.params.suditSealType=1
            this.getList()
        },
        //待审批
        getSuditSealType2(){
            this.params.suditSealType=2
            this.getList()
        },
        //我已审批
        getSuditSealType3(){
            this.params.suditSealType=3
            this.getList()
        },
        handleSizeChange(val) {

            this.params.pagesize = val
            if(this.activeName=='first'){
                this.getSuditSealType0()
            }else if(this.activeName=='second'){
                this.getSuditSealType1()
            }else if(this.activeName=='third'){
                this.getSuditSealType2()
            }else if(this.activeName=='fourth'){
                this.getSuditSealType3()
            }
        },
        handleCurrentChange(val) {
            this.params.pageNo = val
            if(this.activeName=='first'){
                this.getSuditSealType0()
            }else if(this.activeName=='second'){
                this.getSuditSealType1()
            }else if(this.activeName=='third'){
                this.getSuditSealType2()
            }else if(this.activeName=='fourth'){
                this.getSuditSealType3()
            }
        },
        handleClick(tab, event) {

            this.params.contractName = '';//合同名称
            this.params.auditNum = '';// 审批编号
            this.params.initiateEndTime = ''// 审批发起结束时间
            this.params.initiateStartTime = '';// 审批发起开始时间
            this.params.approvalStartTime = '';//审批开始时间
            this.params.approvalEndTime = '';// 审批结束时间
            this.params.participantsName = '';//参与人
            this.params.promoterEnterprise = '';//发起方
            this.params.promoterName = '';//发起人
            this.params.auditStatus = '';// 审批状态0审批中1审批通过2审批驳回

            console.log(tab, event);
            if(tab.name=='first'){
                this.getSuditSealType0()
            }else if(tab.name=='second'){
                this.getSuditSealType1()
            }else if(tab.name=='third'){
                this.getSuditSealType2()
            }else if(tab.name=='fourth'){
                this.getSuditSealType3()
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }

}
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>
.seal{
    height: 100%;
    padding-top:1px;
    box-sizing: border-box;
    background-color: #fff;
    .flow{
        img{
            width: 80px;
            height: 80px;
        }
    }
}

</style>